<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
    <title>微信测试页面</title>  
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>  
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  
    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
    <script>  
        //手机端的调试工具
        var vConsole = new VConsole();
        $(function(){  
            //获取jsconfig  
            var param = {'cmd':'get_js_config','url':location.href};              

            $.ajax({  
                url: 'http://api.kgm0515.top/wechat',  
                type: 'POST',  
                data: param,  
                datatype: 'json',  
                success: function (data) {                
                    console.log(data);
                    wx.config(data);  
                    wx.ready(function(){  
                            document.getElementById('btn1').onclick = function() {										
                                wx.chooseImage({
                                    count: 5, // 默认可以选择5张图片
                                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                                    success: function(res) {
                                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                                    }
                                });
                            }
            
                            document.getElementById('btn2').onclick = function() {
                                wx.openLocation({
                                    latitude: 39.54, // 纬度，浮点数，范围为90 ~ -90
                                    longitude: 116.23, // 经度，浮点数，范围为180 ~ -180。
                                    name: '帝都天安门', // 位置名
                                    address: '天安门的中心', // 地址详情说明
                                    scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
                                    infoUrl: 'http://www.163.com' // 在查看位置界面底部显示的超链接,可点击跳转
                                });
                            }
        
                            
                            document.getElementById('btn3').onclick = function() {
                                wx.scanQRCode({
                                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                                    success: function(res) {
                                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果

                                        alert(result);
                                    },fail:function(err){
                                        
                                        alert(JSON.stringify(err))
                                    }
                                });
                            }     
                            
                            document.getElementById('btn4').onclick = function() {
                                wx.getNetworkType({
                                        success: function (res) {
                                            var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi

                                            alert(networkType);
                                        }
                                    });
                            }
                                                                                    
                    });  
                    wx.error(function(res){  
                        alert(JSON.stringify(res));  
                        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。                      
                    });  

                }  
            })  
            
        })  

  
    </script>  
</head>  
<body>  
    <button id="btn1">拍照或者选择图片</button>
    <button id="btn2">地图</button>
    <button id="btn3">扫一扫</button>

    <button id="btn4">获取网络状态</button>
    
    
</body>  
</html>  